<template>
    <div class="body">
        <div class="banner banMis">
            <mt-swipe :auto="4000" :continuous="true">
                <mt-swipe-item v-for="(item,index) in bannerList" :key="index">
                    <router-link :to="item.link_url">
                        <img :src="item.thumb" alt="">
                    </router-link>
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <div class="header" v-if="activeType==1">
            <div>
                <ol>
                    <li :style="{left:jindu(Math.floor(activeData.activity_end_num/activeData.activity_all_num*100))}"></li>
                </ol>
                <dl>
                    <dd>
                        <h1>{{activeData.activity_name}}<span>{{Math.floor(activeData.activity_end_num/activeData.activity_all_num*100)}}%</span></h1>
                        <h2>做活动任务得奖励</h2>
                    </dd>
                    <dt @click="loseActive(activeData.users_activity_id)">放弃活动</dt>
                </dl>
            </div>
            <p></p>
        </div>

        <div class="nav" ref="navBox">
            <div :class="{navboxactive:navlistClass}">
                <ul>
                    <li v-if="nomission" :class="{active:icur===2}" @click="tabcheck(2)">
                        <h1>未完成任务</h1>
                        <p></p>
                    </li>
                    <li :class="{active:icur===0}" @click="tabcheck(0)">
                        <h1>普通任务</h1>
                        <p></p>
                    </li>
                    <li :class="{active:icur===1}" @click="tabcheck(1)">
                        <h1>会员任务</h1>
                        <p></p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="swiperwrap" ref="swilperbox">
            <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" v-if="swilperKey">
                <!-- slides -->
                <swiper-slide :indexer="2" v-if="nomission">
                    <div ref="listBox" class="listbox">
                        <img v-if="mislist.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

                        <div class="misbox" v-if="icur===2">
                            <dl @click="$router.push({path: '/steps',query:{task_id:item.user_task_id,state:0}})"
                                v-for="(item,index) in mislist[0]" :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>

                        <div class="misbox" v-if="icur!==2">
                            <dl @click="$router.push({path: '/detial',query:{id:item.id}})"
                                v-for="(item,index) in mislist[0]"
                                :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>
                    </div>
                    <h5 v-if="mislist[0].length>10 && !listkey" @click="addMore()">加载更多</h5>
                </swiper-slide>
                <swiper-slide :indexer="0">
                    <div ref="listBox" class="listbox">
                        <img v-if="mislist.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

                        <div class="misbox" v-if="icur===2">
                            <dl @click="$router.push({path: '/steps',query:{task_id:item.user_task_id,state:0}})"
                                v-for="(item,index) in mislist[1]" :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>

                        <div class="misbox" v-if="icur!==2">
                            <dl @click="$router.push({path: '/detial',query:{id:item.id}})"
                                v-for="(item,index) in mislist[1]"
                                :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>
                    </div>
                    <h5 v-if="mislist[1].length>10 && !listkey" @click="addMore()">加载更多</h5>
                    <img v-if="mislist[1].length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">
                </swiper-slide>
                <swiper-slide :indexer="1">
                    <div ref="listBox" class="listbox">
                        <img v-if="mislist.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

                        <div class="misbox" v-if="icur===2">
                            <dl @click="$router.push({path: '/steps',query:{task_id:item.user_task_id,state:0}})"
                                v-for="(item,index) in mislist[2]" :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>

                        <div class="misbox" v-if="icur!==2">
                            <dl @click="$router.push({path: '/detial',query:{id:item.id}})"
                                v-for="(item,index) in mislist[2]"
                                :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>
                    </div>
                    <img v-if="mislist[2].length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">
                    <h5 v-if="mislist[2].length>10 && !listkey" @click="addMore()">加载更多</h5>
                </swiper-slide>
            </swiper>
        </div>

        <div class="btmBox" style="height: 2rem;"></div>

        <propos @propskey="propskey" @closeprops="closeprops" :openprops="propsstatus" msgtext="确定要放弃活动吗"></propos>
    </div>
</template>

<script>
    import {axiosPost} from "../../axios";
    import {Toast, Indicator} from "mint-ui";
    import propos from "../../components/propos";
    export default {
        name: "",
        data() {
            return {
                propsstatus:false,
                jin: 55,
                icur: 2,
                mislist: [
                    [], [], []
                ],
                bannerList: [],
                activeData: null,
                navlistClass: false,
                users_activity_id:'',
                listkey: false,
                nomission: true,
                swiperObj: null,
                swilperKey: false,
                activeType: 0,
                swiperOption: {
                    // 参数选项,显示小点
                    pagination: '.swiper-pagination',
                    //循环
                    loop: true,
                    slide: 1,
                    paginationClickable: true,
                    spaceBetween: 25,
                    on: {
                        slideChangeTransitionEnd: () => {
                            this.swiperObj = this.$refs.mySwiper.$swiper;
                            let swiper = this.swiperObj;
                            if (swiper) {
                                let indexnum = swiper.slides[swiper.activeIndex].attributes.indexer.value;
                                this.icur = parseInt(indexnum);
                                this.listkey = false;
                                this.$refs.listBox.style.height = 'auto';
                            }
                            this.setlistScoroll();
                        }
                    }
                }
            }
        },
        components:{
            propos
        },
        computed: {

        },
        created() {

        },
        mounted() {
            this.swilperKey = false;
            if (!localStorage.getItem('userinfo')) {
                sessionStorage.icur = 0;
                this.icur = 0;
                this.nomission = false;
                this.getmission(true);
                this.getBanner();
                this.activeType = 2;
            } else {
                //获取活动信息
                this.getActiveinfo();
                axiosPost('index/task_list', {
                    'select_type': 2
                }, (res) => {
                    if (res.code === -2) {
                        localStorage.removeItem('userinfo');
                        Toast({
                            message: '登录过期，请重新登录',
                            duration: 1000
                        });
                        setTimeout(() => {
                            this.$router.push('/login');
                        }, 1500);
                        return
                    }
                    //console.log(res)
                    if (res.code != 1) {
                        sessionStorage.icur = 0;
                        this.icur = 0;
                        this.mislist[0] = [];
                        this.nomission = false;
                    } else {
                        this.nomission = true;
                        this.mislist[0] = [];
                        for (let index in res.data) {
                            this.mislist[0].push(res.data[index])
                        }
                    }
                    this.getmission();

                    this.getBanner();
                });
            }
            window.addEventListener('scroll', this.handleScroll, true);
        },
        methods: {
            propskey(){
                this.propsstatus = true;
                axiosPost('users/give_up_activity', {
                    users_activity_id:this.users_activity_id
                }, (res) => {
                    if (res.code !== 1) {
                        return Toast({
                            message: res.msg,
                            duration: 1000
                        });
                    }
                    this.propsstatus = false;
                    Toast({
                        message: '活动放弃成功',
                        duration: 1000
                    });
                    this.activeType = 0;
                });
            },
            closeprops(key){
                this.propsstatus = key;
            },
            setlistScoroll(){
                let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
                if(top>110){
                    this.$nextTick(()=>{
                        document.body.scrollTop = 110;
                        document.documentElement.scrollTop = 110;
                    })
                }
            },
            loseActive(users_activity_id){
                this.propsstatus = true;
                this.users_activity_id = users_activity_id;
            },
            jindu(jin) {
                return -(1.07 - 1.07 / 100 * (jin)) + 'rem'
            },
            //获取活动内容
            getActiveinfo() {
                axiosPost('about/get_recivew_activity', {}, (res) => {
                    if (res.code !== 0) {
                        return Toast({
                            message: res.msg,
                            duration: 1000
                        });
                    }
                    this.activeType = res.data.is_hidden;
                    this.activeData = res.data;
                });
            },
            callback() {
                //console.log(11111)
            },
            addMore() {
                this.listkey = !this.listkey;
                let swiper = this.$refs.mySwiper;
                if (swiper.$swiper) {
                    for (let i = 0; i < swiper.$swiper.slides.length; i++) {
                        swiper.$swiper.slides[i].children[0].style.height = 'auto';
                    }
                }
                this.$refs.listBox.style.height = 'auto';
            },
            handleScroll() {
                let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
                if (top > this.$refs.navBox.offsetTop) {
                    this.navlistClass = true;
                } else {
                    this.navlistClass = false;
                }
            },
            tabcheck(num) {
                this.icur = num;
                sessionStorage.icur = num;
                this.listkey = false;
                this.$refs.listBox.style.height = 'auto';
                this.$refs.mySwiper.$swiper.slideTo(this.getSiderIndex(num), 400, false);
                this.setlistScoroll();
            },
            getSiderIndex(num) {
                let indexnum = 0;
                if (this.$refs.mySwiper.$swiper.slides.length == 5) {
                    switch (num) {
                        case 2:
                            indexnum = 1;
                            break;
                        case 0:
                            indexnum = 2;
                            break;
                        case 1:
                            indexnum = 3;
                            break;
                        default:
                            break;
                    }
                } else {
                    switch (num) {
                        case 2:
                            indexnum = 1;
                            break;
                        case 0:
                            indexnum = 1;
                            break;
                        case 1:
                            indexnum = 2;
                            break;
                        default:
                            break;
                    }
                }
                return indexnum
            },
            getmission() {
                axiosPost('index/task_list', {
                    'select_type': 0
                }, (res) => {

                    axiosPost('index/task_list', {
                        'select_type': 1
                    }, (res) => {

                        this.swilperKey = true;

                        if (res.code !== 1) {
                            this.mislist[2] = [];
                            Indicator.close();
                            return
                        }

                        this.mislist[2] = [];
                        for (let index in res.data) {
                            this.mislist[2].push(res.data[index])
                        }

                        setTimeout(() => {
                            let swiper = this.$refs.mySwiper;
                            if (swiper.$swiper) {
                                this.$refs.mySwiper.$swiper.slideTo(1, 400, false)
                                for (let i = 0; i < swiper.$swiper.slides.length; i++) {
                                    let len = swiper.$swiper.slides[i].children[0].children[0].children.length
                                    if (len > 10) {
                                        swiper.$swiper.slides[i].children[0].style.height = swiper.$swiper.slides[i].children[0].children[0].children[0].offsetHeight * 10 + this.rem() * 0.3 * 10 + 0.1 + 'px';
                                        // console.log(swiper.$swiper.slides[i].children[0].children[0])
                                    }
                                }
                            }
                        }, 200);
                    });

                    if (res.code !== 1) {
                        this.mislist[1] = [];
                        Indicator.close();
                        return
                    }
                    this.mislist[1] = [];
                    for (let index in res.data) {
                        this.mislist[1].push(res.data[index])
                    }

                });

            },
            //获取轮播图
            getBanner() {
                axiosPost('slideprojector/index', {
                    'type': 2
                }, (res) => {
                    //console.log(res)
                    if (res.code !== 1) {
                        return Toast({
                            message: res.msg,
                            duration: 1000
                        });
                    }
                    this.bannerList = res.data;
                });
            }
        },
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll, true)
        },
    }
</script>

<style scoped lang="less">
    @import "../../style/default";
    @import "../../style/indexlist";


    .body {
        background: @color4;
    }

    body #app .body .listActive {
        max-height: initial;
    }

    .banner {
        padding: 0.4rem 0.4rem 0 0.4rem;
        height: 1.8rem;

        img {
            height: 1.8rem;
        }
    }

    .swiperwrap {
        overflow: hidden;
    }

    .header {
        padding: 0 0.4rem;
        height: 1.4rem;
        margin-top: 0.4rem;

        ol {
            width: 1.07rem;
            height: 0.08rem;
            background: rgba(255, 234, 227, 1);
            border-radius: 0.04rem;
            position: relative;
            overflow: hidden;

            li {
                width: 1.07rem;
                height: 0.08rem;
                background: rgba(255, 70, 45, 1);
                border-radius: 0.04rem;
                position: absolute;
                left: -0.5rem;
                top: 0;
            }
        }

        dl {
            overflow: hidden;

            dd {
                float: left;
                width: calc(100% - 1.56rem);

                h1 {
                    font-size: @font34;
                    font-weight: 500;
                    color: @color3;
                    padding: 0.1rem 0;

                    span {
                        color: @color1;
                    }
                }

                h2 {
                    font-size: 0.24rem;
                    font-weight: 400;
                    color: rgba(170, 170, 170, 1);
                }
            }

            dt {
                width: 1.56rem;
                padding: 0.08rem 0;
                line-height: normal;
                background: @color1;
                border-radius: 0.26rem;
                text-align: center;
                font-size: @font28;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                float: right;
                margin-top: 0.2rem;
                /*display: table;*/
                /*i{*/
                /*    display: table-cell;*/
                /*    vertical-align: middle;*/
                /*}*/
            }
        }

        p {
            margin-top: 0.3rem;
            border-bottom: 1px solid #efefef7a;
        }
    }

    .nav {
        height: 1.1rem;

        .navboxactive {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }

        div {
            height: 1.1rem;
            width: 100%;
            background: @color4;

            ul {
                overflow: hidden;
                margin: 0 0.4rem;

                .active {
                    h1 {
                        font-size: 0.4rem;
                        color: @color3;
                    }

                    p {
                        display: block;
                    }
                }

                li {
                    float: left;
                    color: @color2;
                    margin-right: 0.4rem;

                    h1 {
                        line-height: 1.1rem;
                        font-size: @font32;
                        font-weight: 400;
                        height: 0.9rem;
                        overflow: hidden;
                    }

                    p {
                        width: 0.42rem;
                        height: 0.06rem;
                        background: rgba(42, 43, 63, 1);
                        margin: 0 auto;
                        display: none;
                    }
                }
            }
        }
    }

    .listbox {
        overflow: hidden;

        .misbox {
            margin-top: 0;

            dl {
                margin-top: 0;
                margin-bottom: 0.3rem;
            }
        }
    }

    h5 {
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        color: @color2;
        font-size: @font28;
        padding: 0.2rem;
    }

</style>